<template>
    <div id="index">
        <img src="./assets/bg.png" class="bg">
        <div class="logo" @click="goNewWindow">
            <img src="./assets/logo.png">
        </div>
    </div>
</template>

<script>
const url = require("url");
const fs = require("fs");
const path = require("path");

const ipcRenderer = require("electron").ipcRenderer;
const BrowserWindow = require("electron").remote.BrowserWindow;
const dataPath = require("electron").remote.app.getPath('userData');
const fileUrl = path.join(dataPath, 'config.json');

let config;
if (fs.existsSync(fileUrl)) {
    config = JSON.parse(fs.readFileSync(fileUrl));
} else {
    config = {};
    fs.writeFileSync(fileUrl, '{}');
}

export default {
    name: "index",
    data() {
        return {
            // 新窗口对象
            newWindow: null,
            // 新窗口需要的主窗口id
            windowID: null,

            loading: false,

            APPID: this.$store.state.Config.APPID,
            APPKEY: this.$store.state.Config.APPKEY,
            REDIRECT_URI: this.$store.state.Config.REDIRECT_URI,
        };
    },
    watch: {
        access_token() {
            if (this.access_token) {
                this.$router.push('/admin');
            }
        }
    },
    computed: {
        access_token() {
            return this.$store.getters.GET_ACCESSTOKEN;
        }
    },
    created() {
        
    },
    methods: {
        // 获取到code授权
        goLogin(code) {
            ipcRenderer.send(config.Token && config.Token.expires_in < 3600 * 24 ? 'refresh-token' : 'get-token', {
                code,
                config: this.$store.state.Config
            });
            ipcRenderer.on('token-back', (event, arg) => {
                console.log(arg);
                this.save(arg);
            });
        },
        save(TokenObj) {
            let { expires_in, access_token, refresh_token } = TokenObj;
            config.Token = TokenObj;
            this.$store.commit('SAVE_ACCESSTOEKN', { expires_in, access_token, refresh_token });
            fs.writeFileSync(fileUrl, JSON.stringify(config, null, 4));
            new window.Notification('通知', {
                title: '通知',
                body: '恭喜你，登录成功啦！'
            });
            this.$router.push('/admin');
        },
        // 去新窗口
        goNewWindow() {
            if (this.newWindow) return;
            this.windowID = BrowserWindow.getFocusedWindow().id;
            this.loading = true;
            let uri = `https://caiyun.feixin.10086.cn/authorize.jsp?response_type=code&client_id=${this.APPID}&redirect_uri=${this.REDIRECT_URI}&scope=nd_cloud&state=pp`;

            this.newWindow = new BrowserWindow({ width: 800, height: 500, resizable: false, show: true });
            this.newWindow.loadURL(uri);
            // 加载完成才显示
            // this.newWindow.once('ready-to-show', () => {
            //     this.newWindow.show()
            // })
            this.newWindow.webContents.on("did-finish-load", () => {
                this.newWindow.webContents.send("getWindowID", this.windowID);
            });
            this.newWindow.on('close', () => {
                this.newWindow = null;
                this.loading = false;
            });

            ipcRenderer.on("getCode", (event, location) => {
                let urlObj = url.parse(location.href, true);
                if (urlObj.query && urlObj.query.code) {
                    this.code = urlObj.query.code;
                    this.goLogin(this.code);
                } else {

                }
                this.loading = false;
            });
        }
    }
};
</script>

<style scoped>
#index .logo {
  transition: all 0.2s;
}
#index {
  width: 100%;
  min-width: 150px;
  height: 100vh;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
#index .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
#index .logo {
  width: 120px;
  height: 120px;
  line-height: 100px;
  background-color: white;
  border-radius: 50%;
  position: relative;
  margin: 0 0 30px 0;
  cursor: pointer;
}
#index .logo img {
  width: 80%;
  height: 80%;
  position: absolute;
  top: 10%;
  right: 10%;
}
#index .logo:hover {
  width: 130px;
  height: 130px;
}
</style>
